<template>
  <el-table :data="list" stripe>
    <el-table-column prop="receiverName" label="姓名" min-width="150px" />
    <el-table-column prop="lockAlias" label="智能锁" min-width="120px" />
    <el-table-column prop="senderName" label="发送人" min-width="120px" />
    <el-table-column prop="receiverAccount" label="接收者账号	" min-width="160px" />
    <el-table-column prop="startDate" label="有效期" min-width="280px">
      <template #default="scope">
        {{ scope.row.startDate }} - {{ scope.row.endDate }}
      </template>
    </el-table-column>
    <el-table-column prop="keyStatus" label="状态" min-width="80px" />
    <el-table-column prop="date" label="操作" min-width="220px">
      <template #default="scope">
        <el-button link type="primary" @click="handleEdit(scope.row)">修改有效期</el-button>
        <el-button link type="primary" @click="handleFreeze(scope.row)">冻结</el-button>
        <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <EditExpirationDate
    :visible="editExpirationVisible"
    :value="rowData"
    @cancel="() => editExpirationVisible = false"
    @ok="handleEditExpirationDateOk">
      <template #default="scope">
        <el-form-item prop="receiverAccount" label="接收者账号">
          {{ scope.form.receiverAccount }}
        </el-form-item>
        <el-form-item prop="receiverName" label="姓名">
          {{ scope.form.receiverName }}
        </el-form-item>
        <el-form-item prop="isRemoteUnlock" label="远程开锁">
          <el-switch
            v-model="scope.form.isRemoteUnlock"
            inline-prompt
            active-value="1"
            inactive-value="2"
            active-text="是"
            inactive-text="否" />
        </el-form-item>
      </template>
    </EditExpirationDate>
</template>
<script setup name="ElectronicKeyPane">
import EditExpirationDate from './component/editExpirationDate.vue'


const { proxy } = getCurrentInstance()

const editExpirationVisible = ref(false)
const rowData = ref({})
const list = ref([
  {
    "date": 1681096736000,
    "lockAlias": "大门口网吧入口楼梯",
    "keyStatus": "110401",
    "isRemoteUnlock": 1,
    "endDate": '2024-12-24  12:33:26',
    "receiverName": "金丽美",
    "keyId": 90436259,
    "receiverUid": 13711525,
    "receiverAccount": "+8615184958237",
    "lockId": 8231811,
    "keyNameForAdmin": "金丽美",
    "senderName": "公司管理员",
    "lockData": "sRxAxPz6dnKqAY2RFlXOiOjMdkqAETMelaYvpWuH1LfVuRQr8WKIKg3yIy+DXRLQLLF0Rrc5F7PRvPrYCIdH6eI5jMFv6koYtNR7sEp6TxHDJM01SrPPI1zt0aBXPMDBXZFu3NUX6QTV85XHVXRTSXSOIa8zr2Ot+2UnDgwmPtf0ujYBPUa9NaM3LF4fj21oQ349lH3Mgj/yQf3/3CZ+a26ozUqnI7g54QT3X7SqTj2uufeioFQfvtTFTRZ4zhgN3ZflyxW022ur/pvXwvM7VMFAxzcpesu7VDZVWyNwNET6I7aClO+dvgYaX1/PuP31AU4A00aqH+6Mtey8HkQ0iYkxOXL1PIUb3Ru1MZuuLsED0Au/f4GaIzuRtoetxM5LFwZfQNV1T5BhGsVpxnpI/S7PR+mgIC+N3sKq2zkulxrZ+mmpcYydH/yVeIiw6aj/hf7FZLqg2SMGnfiNKRg3Wt3IyynfvNbWhpjpByoNmhey9kTrciRWwCDW02vZhgQJspaoRpDEGQG7e2Y34+wOnB5kvdrgqfYCiGPMITMFio37tHmgI8Wun3JVpr6B/JeRsljmpZRPamaHj64ybKPVMGLAASoOfSBCsqvg0eSNCpaLQvjaUpU=",
    "keyType": 1,
    "startDate": '2023-12-23 12:33:26',
    password: '123456'
  }
])

// 修改有效期
function handleEdit(row) {
  rowData.value = row
  editExpirationVisible.value = true
}

// 冻结
function handleFreeze(row) {
  proxy.$modal.confirm('确定冻结电子钥匙？').then(() => {
    return true
  }).then(() => {
    proxy.$modal.msgSuccess('冻结成功');
  }).catch(() => {})
}

// 删除钥匙
function handleDelete(row) {
  proxy.$modal.confirm('确定删除电子钥匙？').then(() => {
    return true
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功');
  }).catch(() => {})
}

// 修改有效期弹窗确认事件
function handleEditExpirationDateOk(form) {
  console.log(form);
  editExpirationVisible.value = false
}
</script>
